<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Xget Now</title>
    <style>
      :root {
        --primary-accent-color: #8a2be2;
        --success-color: #4caf50;
        --container-bg: rgba(255, 255, 255, 0.1);
        --container-border: rgba(255, 255, 255, 0.2);
        --text-color: white;
        --text-secondary-color: rgba(255, 255, 255, 0.7);
        --input-bg: rgba(0, 0, 0, 0.2);
        --hover-bg: rgba(255, 255, 255, 0.2);
      }

      html {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        overflow: hidden; /* Prevents scrollbars from appearing on the html element */
      }

      body {
        width: 380px;
        min-height: 400px;
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
        color: var(--text-color);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(40, 40, 40, 0.3);
        border-radius: 16px;
        overflow: hidden;
        animation: fadeIn 0.5s ease-in-out;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: scale(0.95);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      .header {
        padding: 20px;
        text-align: center;
        border-bottom: 1px solid var(--container-border);
        background: rgba(255, 255, 255, 0.05);
      }

      .header .link-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        padding: 6px 12px;
        font-size: 12px;
        opacity: 0.8;
        transition: opacity 0.2s ease;
        border-radius: 6px;
        background: var(--container-bg);
        border: 1px solid var(--container-border);
        text-decoration: none;
        color: var(--text-color);
      }

      .header .link-item:hover {
        opacity: 1;
        background: var(--hover-bg);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
      }

      .header .link-item .link-icon {
        margin-right: 6px;
        font-size: 14px;
      }

      .header .link-item .link-text {
        font-size: 12px;
      }

      .header h1 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.5px;
      }

      .content {
        padding: 20px;
        max-height: calc(400px - 70px); /* Fixed height instead of viewport */
        overflow-y: auto;
        scroll-behavior: smooth;
      }

      /* Enhanced Custom Scrollbar */
      .content::-webkit-scrollbar,
      .platforms::-webkit-scrollbar {
        width: 6px;
      }

      .content::-webkit-scrollbar-track,
      .platforms::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 3px;
      }

      .content::-webkit-scrollbar-thumb,
      .platforms::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
        transition: background 0.2s ease;
      }

      .content::-webkit-scrollbar-thumb:hover,
      .platforms::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.4);
      }

      .content::-webkit-scrollbar-thumb:active,
      .platforms::-webkit-scrollbar-thumb:active {
        background: rgba(255, 255, 255, 0.6);
      }

      /* Scrollbar corner for better appearance */
      .content::-webkit-scrollbar-corner,
      .platforms::-webkit-scrollbar-corner {
        background: transparent;
      }

      /* Smooth scrolling support for Firefox */
      .content,
      .platforms {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
      }

      /* Auto-hide scrollbar behavior */
      .content:not(:hover):not(:focus-within),
      .platforms:not(:hover):not(:focus-within) {
        scrollbar-width: none;
      }

      .content:not(:hover):not(:focus-within)::-webkit-scrollbar,
      .platforms:not(:hover):not(:focus-within)::-webkit-scrollbar {
        width: 0;
      }

      .setting-group {
        margin-bottom: 25px;
        padding: 15px;
        background: var(--container-bg);
        border: 1px solid var(--container-border);
        border-radius: 12px;
        transition: all 0.3s ease;
      }

      .setting-group.compact {
        padding: 10px 15px;
        margin-bottom: 20px;
      }

      .setting-group:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      }

      .setting-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 12px;
        color: var(--text-secondary-color);
      }

      .setting-label.compact {
        margin-bottom: 0;
      }

      .toggle-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 28px;
      }

      .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        transition: 0.4s;
        border-radius: 28px;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        border-radius: 50%;
      }

      input:checked + .slider {
        background-color: var(--primary-accent-color);
      }

      input:checked + .slider:before {
        transform: translateX(22px);
      }

      .domain-input {
        width: 100%;
        padding: 12px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: var(--input-bg);
        color: var(--text-color);
        font-size: 14px;
        box-sizing: border-box;
        transition: all 0.3s ease;
      }

      .domain-input::placeholder {
        color: var(--text-secondary-color);
      }

      .domain-input:focus {
        outline: none;
        border-color: var(--primary-accent-color);
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.3);
      }

      .platforms {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 8px;
        padding: 5px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.1);
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
      }

      .platform-category {
        padding: 8px 12px 0 12px;
        margin-bottom: 10px;
      }

      .category-title {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary-color);
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        padding-left: 5px;
      }

      .platform-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 8px;
      }

      .platform-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.05);
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        border: 1px solid transparent;
        transition: all 0.2s ease-in-out;
      }

      .platform-item:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
      }

      .status {
        margin-top: 15px;
        padding: 12px;
        border-radius: 8px;
        font-size: 13px;
        text-align: center;
        border: 1px solid transparent;
        animation: status-pop-in 0.3s ease;
      }

      @keyframes status-pop-in {
        from {
          opacity: 0;
          transform: scale(0.9);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      .status.hiding {
        animation: fadeOut 0.3s ease forwards;
      }

      @keyframes fadeOut {
        to {
          opacity: 0;
        }
      }

      .status.success {
        background: rgba(76, 175, 80, 0.25);
        border-color: rgba(76, 175, 80, 0.4);
      }

      .status.error {
        background: rgba(244, 67, 54, 0.25);
        border-color: rgba(244, 67, 54, 0.4);
      }

      .mini-toggle {
        width: 36px;
        height: 20px;
      }

      .mini-toggle .slider {
        border-radius: 20px;
      }

      .mini-toggle .slider:before {
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
      }

      .mini-toggle input:checked + .slider:before {
        transform: translateX(16px);
      }

      .links {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .link-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        background: var(--container-bg);
        border-radius: 8px;
        text-decoration: none;
        color: var(--text-color);
        transition: all 0.2s ease;
        border: 1px solid var(--container-border);
      }

      .link-item:hover {
        background: var(--hover-bg);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px) scale(1.02);
      }

      .link-icon {
        margin-right: 12px;
        font-size: 18px;
        opacity: 0.8;
      }

      .link-text {
        font-size: 14px;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <a
        href="https://xuc.xi-xu.me/"
        target="_blank"
        class="link-item"
        style="margin-bottom: 10px; display: inline-block"
      >
        <span class="link-icon">🔗</span>
        <span class="link-text">URL 转换器</span>
      </a>
      <h1>Xget Now</h1>
    </div>

    <div class="content">
      <div class="setting-group compact">
        <label class="setting-label compact">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              min-height: 28px;
            "
          >
            <span>启用扩展</span>
            <label class="toggle-switch">
              <input type="checkbox" id="enabledToggle" />
              <span class="slider"></span>
            </label>
          </div>
        </label>
      </div>

      <div class="setting-group">
        <label class="setting-label" for="domainInput">Xget 域名（必填）</label>
        <input
          type="text"
          id="domainInput"
          class="domain-input"
          placeholder="your-xget-domain.com"
        />
      </div>

      <div class="setting-group">
        <label class="setting-label">启用的平台</label>
        <div class="platforms">
          <div class="platform-category">
            <div class="category-title">代码托管</div>
            <div class="platform-grid">
              <div class="platform-item">
                <span>GitHub</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="ghToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>GitLab</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="glToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>Gitea</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="giteaToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>Codeberg</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="codebergToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>SourceForge</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="sfToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>AOSP</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="aospToggle" />
                  <span class="slider"></span>
                </label>
              </div>
            </div>
          </div>

          <div class="platform-category">
            <div class="category-title">AI/ML</div>
            <div class="platform-grid">
              <div class="platform-item">
                <span>Hugging Face</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="hfToggle" />
                  <span class="slider"></span>
                </label>
              </div>
            </div>
          </div>

          <div class="platform-category">
            <div class="category-title">包管理</div>
            <div class="platform-grid">
              <div class="platform-item">
                <span>npm</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="npmToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>PyPI</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="pypiToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>Conda</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="condaToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>Maven</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="mavenToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>RubyGems</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="rubygemsToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>Crates.io</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="cratesToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>NuGet</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="nugetToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>Go Modules</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="golangToggle" />
                  <span class="slider"></span>
                </label>
              </div>
            </div>
          </div>

          <div class="platform-category">
            <div class="category-title">其他</div>
            <div class="platform-grid">
              <div class="platform-item">
                <span>arXiv</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="arxivToggle" />
                  <span class="slider"></span>
                </label>
              </div>
              <div class="platform-item">
                <span>F-Droid</span>
                <label class="toggle-switch mini-toggle">
                  <input type="checkbox" id="fdroidToggle" />
                  <span class="slider"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="setting-group">
        <div class="links">
          <a
            href="https://github.com/xixu-me/Xget"
            target="_blank"
            class="link-item"
          >
            <span class="link-icon">🚀</span>
            <span class="link-text">Xget 存储库</span>
          </a>
          <a
            href="https://github.com/xixu-me/Xget-Now"
            target="_blank"
            class="link-item"
          >
            <span class="link-icon">📖</span>
            <span class="link-text">扩展存储库</span>
          </a>
        </div>
      </div>

      <div id="status" class="status" style="display: none"></div>
    </div>

    <script src="webext-compat.js"></script>
    <script src="popup.js"></script>
  </body>
</html>
